<!--生产计划-->
<template>
  <div class="page-container main">
    <div class="tool-container">
      <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
        <el-form-item prop="planNo">
          <el-input v-model="queryParams.searchValue" placeholder="计划编号" clearable />
        </el-form-item>

        <el-form-item prop="times">
          <el-date-picker
            v-model="times"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            clearable
          />
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="queryParams.status">
            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" clearable> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>

        <el-button type="primary" icon="Plus" @click="handleAdd" style="float:right">新建规则</el-button>
      </el-form>
    </div>

    <div class="tabel-container myTable">
      <el-table :data="tableData" v-loading="loading" border @expand-change="expandChange">
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.children" :border="childBorder">
              <el-table-column label="设备类型" prop="deviceType">
                <template #default="deviceType">
                  <dict-tag :options="dict.device_type" :value="deviceType.deviceType" />
                </template>
              </el-table-column>
              <el-table-column label="计划完成数量" prop="planQuantity" />
              <el-table-column label="标准工时(小时)" prop="standardWorkingHours" />
              <el-table-column label="实际完成数量" prop="finishQuantity" />
            </el-table>
          </template>
        </el-table-column>

        <el-table-column :resizable="true" prop="planNo" label="计划编号" sortable> </el-table-column>
        <el-table-column :resizable="true" prop="startTime" label="计划开始时间" sortable> </el-table-column>
        <el-table-column :resizable="true" prop="endTime" label="计划结束时间" sortable> </el-table-column>
        <el-table-column :resizable="true" prop="openTime" label="实际开始时间" sortable> </el-table-column>
        <el-table-column :resizable="true" prop="closeTime" label="实际完成时间" sortable> </el-table-column>
        <el-table-column :resizable="true" prop="planQuantity" label="计划完成数量" sortable> </el-table-column>
        <el-table-column :resizable="true" prop="finishQuantity" label="实际完成数量" sortable> </el-table-column>
        <el-table-column :resizable="true" prop="id" label="操作" sortable fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleStart(scope.row)">执行</el-button>
            <el-button link type="danger" @click="handleStop(scope.row)">结束</el-button>
            <el-button link type="primary" @click="handleShown(scope.row)">展示</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <vxe-table ref="tableRef" :data="tableData" v-loading="loading">
        <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable></vxe-table-column>
        <vxe-table-column :resizable="true" field="planNo" title="计划编号" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="startTime" title="计划开始时间" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="endTime" title="计划结束时间" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="openTime" title="实际开始时间" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="closeTime" title="实际完成时间" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="planQuantity" title="计划完成数量" sortable> </vxe-table-column>
        <vxe-table-column :resizable="true" field="finishQuantity" title="实际完成数量" sortable> </vxe-table-column>
        <vxe-column field="id" title="操作" width="260" fixed="right" show-overflow>
          <template #default="{ row }">
            <el-button link type="primary" @click="handleStart(row)">执行</el-button>
            <el-button link type="danger" @click="handleStop(row)">结束</el-button>
            <el-button link type="primary" @click="handleShown(row)">展示</el-button>
          </template>
        </vxe-column>
      </vxe-table> -->
    </div>
    <div class="myPager">
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>

    <el-drawer :title="dom.rightComponent.title" v-model="dom.rightComponent.show" direction="rtl" class="demo-drawer" :close-on-click-modal="false">
      <Edit ref="rightComponent" :data="currentItem" @hideRight="dom.rightComponent.show = false; getList();"></Edit>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { list, open, shown, close, del, info } from '@/api/device/plan/index';
import common from '@/utils/common.ts';

export default {
  components: {
    Edit: defineAsyncComponent(() => import('./edit.vue'))
  },
  computed: {
    times: {
      get() {
        return [this.queryParams.params.beginTime, this.queryParams.params.endTime];
      },
      set(value) {
        if (value == null) {
          this.queryParams.params.beginTime = null;
          this.queryParams.params.endTime = null;
        } else {
          this.queryParams.params.beginTime = value[0];
          this.queryParams.params.endTime = value[1];
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 1,
      status: [
        {
          label: '新建',
          value: '1'
        },
        {
          label: '执行中',
          value: '2'
        },
        {
          label: '完成',
          value: '3'
        },
        {
          label: '结束',
          value: '4'
        }
      ],
      queryParams: {
        status: '',
        searchValue: '',
        startTime: '',
        endTime: '',
        params: {
          beginTime: '',
          endTime: ''
        },
        pageNum: 1,
        pageSize: 20
      },
      dom: {
        proxy: null,
        rightComponent: {
          show: false,
          title: '测试'
        }
      },
      proxy: null,
      dict: {},
      currentItem: null
    };
  },
  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.proxy = proxy;
    this.dict = toRefs<any>(this.proxy?.useDict('device_type'));

    this.init();
  },
  methods: {
    init(data) {
      if (data == null) data = this.data;
      this.getList();
    },

    /**
     * 行点击展开
     */
    expandChange(expandedRows, expanded) {
      debugger;
      let planId = expandedRows.planId;
      if (expandedRows.children == null && expanded.length != 0)
        info(planId).then((res) => {
          expandedRows.children = res.data.detailList;
        });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 搜索重置操作 */
    resetQuery() {
      this.$refs.queryFormRef.resetFields();
      this.times = [null, null];
      this.handleQuery();
    },

    /**
     * 查询数据
     */
    getList() {
      this.loading = true;
      list(this.queryParams).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        } else {
          ElMessage.error(res.msg);
        }
      });
    },

    handleAdd() {
      let data = {
        planNo: '',
        startTime: '',
        endTime: '',
        openTime: '',
        closeTime: '',
        planQuantity: 0,
        finishQuantity: 0,
        standardWorkingHours: 0,

        status: '1',
        showing: '',
        detailList: [
          {
            id: 0,
            deviceType: '1',
            planQuantity: 0,
            standardWorkingHours: 0,
            remarks: '',
            finishQuantity: 0,
            placeType: '1'
          }
        ]
      };

      this.dom.rightComponent.title = '新增计划';
      this.currentItem = data;
      this.dom.rightComponent.show = true;

      this.$nextTick(() => {
        this.$refs.rightComponent.init(data);
      });
    },

    handleStart(row) {
      ElMessageBox.confirm('是否确认要执行该计划?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true;
          let id = row.planId;
          open(id)
            .then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.getList();
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },

    handleInfo(row) {},
    handleShown(row) {
      this.loading = true;
      let id = row.planId;
      shown(id)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.getList();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleStop(row) {
      ElMessageBox.confirm('是否确认要结束该计划?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true;
          let id = row.planId;
          close(id)
            .then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.getList();
              } else {
                ElMessage.error(res.msg);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    }
  }
};
</script>
